<template>
  <div id="main-container" class="main-container" :class="'position-left'">
    <!-- 标签页 -->
    <div class="tab-container"></div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <keep-alive>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MainContent",
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .main-container {
    padding: 0 5px 5px;
    position: absolute;
    top: 60px;
    left: 1px;
    right: 1px;
    bottom: 0px;
    background: rgba(67, 69, 70, 0.1);

    .main-content {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      padding: 5px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  .position-left {
    left: 200px;
  }
</style>
